<template>
  <div class="about">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
    <br>
    <div>
      <img :src="base64Img" @click="change()">
    </div>
  </div>
</template>

<script lang="ts">
import axios from "axios";
import {reactive, toRefs} from 'vue'

export default {
  setup(props, ctx) {
    return toRefs(reactive({
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ],


      //http://t.weather.sojson.com/api/weather/city/101030100


      base64Img: '',

      codeImg() {
        let t = new Date().getTime();
        axios.get('http://localhost:9999/jeecg-gateway/sys/randomImage/' + t + '?_t=' + t).then(res => {
          // console.log(res.data.result);
          this.base64Img = res.data.result;
          console.log(this.base64Img)
        });
      },
      change() {
        console.log('刷新验证码')
        this.tableData.push({date:'2023-09-13',name:'aaa',address: 'aaaaa'})
        this.codeImg();
      }

    }));





  }
}
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
